<template>
  <view class="jswz">
  <view  v-if="couponList.length > 0">
    <view class="text title">可用</view>
    <view class="active-container" v-for="(item, index) in couponList" :key="item.id" v-if="item.use == 0 &&  item.type != -1" @click="onClick(item, index)">
      <view class="img">
        <view class="money">
          <view>¥</view>
          <view class="view">{{item.price}}</view>
        </view>
        <view class="money-active">{{item.msg}}</view>
      </view>
      <view class="des">
        <view class="tit">{{item.title}}</view>
        <view class="time">
          <view>{{item.created_at}}-{{item.end_time}}</view>
          <view class="active" >立即使用</view>
        </view>
      </view>
    </view>
	
    <view class="text title">不可用</view>
    <view class="active-container" v-for="(item, index) in couponList" :key="index" v-if="item.use == 0" style="background: rgba(0,0,0,0.5);">
      <view class="img" style="background: rgba(0,0,0,0.5);color: #000;">
        <view class="money">
          <view>¥</view>
          <view class="view">{{item.price}}</view>
        </view>
        <view class="money-active">{{item.msg}}</view>
      </view>
      <view class="des">
        <view class="tit">{{item.title}}</view>
        <view class="time">
          <view>{{item.created_at}}-{{item.end_time}}</view>
          <view class="active" style="border-color:#21252B;color: #A6A6A6   ;">立即使用</view>
        </view>
      </view>
    </view>
	</view>
	<view  v-if="couponList.length <= 0">
		  暂无优惠券
	</view>
  </view>

</template>

<script>
	import provinceData from '@/utils/province';
	import cityData from '@/utils/city';
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import expertUrl from '@/api/expertConsulation'
	import { privateRequest } from '@/utils/request.js'
	export default {
		components: {
			uniTag,uniIcons
		},
		data() {
			return {
				index:0,
				couponList: [],selectArr:{},
			}
		},
		computed:{
		  orderInfo(){
			return this.$store.state.orderInfo 
		  }
		},
		methods:{
			async onClick(items, idx){
				this.$store.commit("setDiscountInfo", items);
				let _this = this
				const res = privateRequest({
					method: 'post',
					url: expertUrl.sel_coupon,
					data:{
					  order_sn: _this.orderInfo.order_sn,
					  coupon_id:items.id
					}
				})		
				res.then(function(d){
					if(d.code == 1){
						uni.navigateTo({
							url: '../../zjwz/zjhz/toOrder'
						});
					}else{
						uni.showToast({
							title: d.msg,
							icon: 'none'
						})
					}
				}).catch(function(err){
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
				this.$set(this.selectArr, items.id, !this.selectArr[items.id]);
				this.$forceUpdate()
			},

			async getCouponList() {
			  const { data } = await this.$axios({
			    url: expertUrl.getCouponList
			  });
			  this.couponList = data.list;
			  // this.couponList.forEach((items)=>{
				 //  this.selectArr[items.id] = false
			  // })
			 
			},
		},
		onLoad() {
			this.getCouponList()
		}
	}
</script>

<style lang="scss" scoped>
	.jswz {		
		padding-left: 10px;
		padding-right: 10px;
		.title{
			font-weight: bold;
			padding-top: 10px;
			font-size: 18px;
		}
		
		.uni-media-list-logo{
			width: 20%;
			.coupon{
				font-size: 24px;
				color: #B0CBE9;
			}
			.coupon-unuse{
				font-size: 24px;
				color: gray;
			}
		}
		.uni-media-list-body {
			height: auto;
			
			.data-use{
				color: gray;
				padding-right: 5px;
				font-size: 12px;
			}
			
			.doctor-unuse{
				color: gray;
			}
		}
		
		.rule{
			color: gray;
			font-size: 12px;
		}
		
		.uni-list-cell::after{
			display: none;
		}
	}
	.active-container{
	  display: flex;
	  background: #FFFFFF;
	  margin-top: 20rpx;
	  .img{
	    width: 200rpx;
	    height: 200rpx;
	    display: flex;
	    justify-content: center;
	    align-content: center;
	    flex-direction: column;
	    color: #FFFFFF;
	    background: url('../../../static/15.png') no-repeat;
	    background-size: 100% 100%;
	    .money{
	      display: flex;
	      justify-content: center;
	      align-content: center;
	      view{
	        line-height: 39rpx;
	      }
	      .view {
	        font-size: 46rpx;
	        margin-left: 5rpx;
	      }
	    }
	    .money-active{
	      display: flex;
	      justify-content: center;
	      align-content: center;
	      margin-top: 20rpx;
	    }
	  }
	  .des{
	    flex: 1;
	    margin-left: 30rpx;
	    display: flex;
	    flex-direction: column;
	    .tit{
	      margin-top: 20rpx;
	    }
	    .time{
	      display: flex;
	      justify-content: space-between;
	      margin-top: 70rpx;
	      color: #9EA3A9;
	      font-size: 24rpx;
	      .active{
	        border: 1px solid #F23030;
	        border-radius: 30rpx;
	        margin-right: 10rpx;
	        color: #F23030;
	        padding: 0 10rpx;
	        font-size: 24rpx;
	      }
	    }
	  }
	}
</style>

